
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<script type="text/javascript">

    var geocoder;
    var map;
    var places, iw;
    var markers = [];
    var autocomplete;
    var listingMarkers = [];
    var MY_MAPTYPE_ID = 'custom_style';
              
    function initialize(lat, lng) {            
        try {
            var featureOpts = [
                {
                    stylers: [
                        {weight: 1}
                    ]
                },
                {
                    elementType: 'labels'
                },
                {
                    featureType: 'water'
                }
            ];
            
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 14,
                center: latlng,
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                mapTypeId: MY_MAPTYPE_ID
            };

            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            
            var styledMapOptions = {
                name: 'Custom Style'
            };

            var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

            map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

            codeListings();  
            places = new google.maps.places.PlacesService(map);
            
        } 
        catch (e) { alert(e); }
    }

    function searchX() {
        try {
            var search = {
                bounds: map.getBounds()
            };            
            places.search(search, function(results, status) {
                if (status == google.maps.places.PlacesServiceStatus.OK) {
                    try {
                        for (var i = 0; i < results.length; i++) {
                            markers[i] = new google.maps.Marker({
                                position: results[i].geometry.location,
                                animation: google.maps.Animation.DROP,
                                icon: "http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_blue.png"
                            });
                            google.maps.event.addListener(markers[i], 'click', getDetails(results[i], i));
                            setTimeout(dropMarker(i), i * 100);
                        }
                    } 
                    catch (e) {
                        //alert(e);
                    }
                }
            });
        } 
        catch (e) {  }
    }

    function getDetails(result, i) {
        return function() {
            places.getDetails( {
                    reference: result.reference
                }, 
                showInfoWindow(i) 
            );
        }
    }

    function showInfoWindow(i) {
        return function(place, status) {
            if (iw) {
                iw.close();
                iw = null;
            }
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                iw = new google.maps.InfoWindow({
                    content: getIWContent(place),
                    disableAutoPan: false
                });
                iw.open(map, markers[i]);
            }
        }
    }

    function getIWContent(place) {
        var content = "";
            content += '<table><tr><td>';
            content += '<img class="placeIcon" src="' + place.icon + '"/></td>';
            content += '<td><b><a href="' + place.url + '">' + place.name + '</a></b>';
            content += '</td></tr></table>';
        return content;
    }

    function dropMarker(i) {
        return function() {
            markers[i].setMap(map);
        }
    }

    function codeAddress() {
        try {      
            var id = '<c:out value="${model.listing.id}"/> ';
            var title = '<c:out value="${model.listing.title}"/> ';
            var address = '<c:out value="${model.listing.address}"/> ';
            var lat = '<c:out value="${model.listing.lat}"/> ';
            var lng = '<c:out value="${model.listing.lng}"/> ';
            putMarker(id, title, "", address, lat, lng);
        } 
        catch (e) {
            alert("codeAddress " + e);
        }
    }
    
    function putMarker(id, title, desc, address, lat, lng) {
        try {
            if ( (lat != undefined && lat.replace(/^\s+|\s+$/g, '') != '') &&
                 (lng != undefined && lng.replace(/^\s+|\s+$/g, '') != '')) {

                var contentString = '<div class="MarkerPopUp" style="text-align:left; min-width:300px; min-height:110px; overflow:hidden; ">' +
                    '<div class="MarkerContext">' +
                    '<table border="0">' +
                    '<tr>' +
                    '<td style="padding:5px;"><span style="font-weight: bold; font-size:19px;">' + title + '</span></td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td style="padding:5px;"><span style="font-weight: normal; font-size:14px;">' + desc + '</span></td>' +
                    '</tr>' +
                    '<tr>' +
                    '<td style="padding:5px;"><span style="font-weight: normal; font-size:14px;">' + address + '</span></td>' +
                    '</tr>' +
                    '</table>' +
                    '</div>' +
                    '</div>';

                    var latlng = new google.maps.LatLng(lat, lng);
                    var infowindow = new google.maps.InfoWindow({
                        content: contentString,
                        disableAutoPan: false
                    });

                    var image = "http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png";
                    
                    var marker = new google.maps.Marker({
                        map: map,
                        position: latlng,
                        animation: google.maps.Animation.DROP,
                        title: name + ": " + address,
                        icon: image
                    });

                    listingMarkers.push(marker);
                    google.maps.event.addListener(marker, 'click', function() {
                        infowindow.open(map, marker);
                    });
                    map.setCenter(latlng, 3);
            }
        } 
        catch (e) {
            //alert("to?" + e);
        }
    }
             
    function putNumberedMarker(number, id, title, desc, address, lat, lng, primaryPhoto, placeType) {
        try {
            if ( (lat != undefined && lat.replace(/^\s+|\s+$/g, '') != '') &&
                 (lng != undefined && lng.replace(/^\s+|\s+$/g, '') != '')) {

                var contentString = '<div class="MarkerPopUp" style="text-align:left; overflow:hidden; max-height: 250px;">' +
                    '<div class="">' +
                    '<table border="0" width="170px;">' +       
                    '<tr>' +
                    '<td style="padding:5px;"><a href="<c:out value="${model.props.appPath}"/>/listing/'+title+'/'+id+'"><span style="font-weight: bold; font-size:12px; font-family: Century Gothic, Calibri;">' + title + '</span></a></td>' +
                    '</tr>' +            
                    '<tr>' +
                    '<td style="padding:5px;"><a href="<c:out value="${model.props.appPath}"/>/listing/'+title+'/'+id+'"><img style="height: 80px;" src="<c:out value="${model.props.rootPath}" />/uploads/img/002-'+primaryPhoto+'" /></a></td>' +
                    '</tr>' +
                    '</table>' +
                    '</div>' +
                    '</div>';

                    var myLatlng = new google.maps.LatLng(lat, lng);
                    var markerImage = new google.maps.MarkerImage("${model.props.appPath}/img/gated-community.png");
                    
                    if (placeType == 4) {
                        markerImage = new google.maps.MarkerImage("${model.props.appPath}/img/condominium-complex.png");
                    }
                    else if (placeType == 6) {
                        markerImage = new google.maps.MarkerImage("${model.props.appPath}/img/gated-community.png");
                    }
                    
                    var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Hello World!', icon: markerImage });
                    markers.push(marker);

                    var infoWindow = new google.maps.InfoWindow({
                        content: contentString,
                        disableAutoPan: false
                    });

                    listingMarkers.push(marker);
                    google.maps.event.addListener(marker, 'click', function() {
                        infoWindow.open(map, marker);
                        map.panTo(marker.getPosition());
                    });
                
                    //map.setCenter(myLatlng, 15);
            }
        } 
        catch (e) {
            alert("to?" + e);
        }
    }
    
    
    function putPlaceMarker(placeMarker) {
        try {
            var place = placeMarker.place;
            
            var id = place.id;
            var placeType = place.placeTypeID;
            
            var title = place.title;
            var desc = place.desc;
            var address = place.address;
            
            var lat = place.lat;
            var lng = place.lng;
            
            var primaryPhoto = "";
            var listings = placeMarker.listings;
            
            var urlTitle = title.replace(/ /g, '-');
            
            if ( (lat != undefined && lat.replace(/^\s+|\s+$/g, '') != '') &&
                 (lng != undefined && lng.replace(/^\s+|\s+$/g, '') != '')) {

                var contentString = '<div class="MarkerPopUp" style=" text-align:left; overflow:hidden; min-height: 250px; min-width: 300px; overflow-y: hidden; padding: 10px;">' +
                    '<table border="0" width="450px;" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">' +      
                    '<tr>' +
                    '<td style="padding:0px;">&nbsp;&nbsp;<a href="${model.props.appPath}/places/'+urlTitle+'/'+id+'" style="color:#369;" target="blank"><span style="font-weight: bold; font-size:18px; font-family: Century Gothic, Calibri; color:#369;">' + title + '</span>&nbsp;&nbsp;(<u>see all</u>)</a></td>' +
                    '</tr>' + 
                    '<tr>' +
                    '<td style="padding:5px;"><span style="font-weight: normal; font-size:12px; font-family: Century Gothic, Calibri;"></span></td>' +
                    '</tr>' +  
                    '<tr>' +
                    '<td style="padding:5px;" align="center">\n\
                        <hr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="placeListings-'+place.id+'"><img src="${model.props.appPath}/img/ajax-loader2.gif" /></div>\n\
                     </td>' +
                    '</tr>' +
                    '</table>' +
                    '</div>';

                    var myLatlng = new google.maps.LatLng(lat, lng);
                    var markerImage = new google.maps.MarkerImage("${model.props.appPath}/img/gated-community.png");
                    var markerTitle = "Gated Community";
                    
                    if (placeType == 5) {
                        markerImage = new google.maps.MarkerImage("${model.props.appPath}/img/condominium-complex.png");
                        var markerTitle = "Condominium Complex";
                    }
                    else if (placeType == 6) {
                        markerImage = new google.maps.MarkerImage("${model.props.appPath}/img/gated-community.png");
                        var markerTitle = "Gated Community";
                    }
                    
                    var marker = new google.maps.Marker({ position: myLatlng, map: map, title: markerTitle, icon: markerImage });
                    markers.push(marker);

                    var infoWindow = new google.maps.InfoWindow({
                        content: contentString,
                        disableAutoPan: false
                    });

                    listingMarkers.push(marker);
                    google.maps.event.addListener(marker, 'click', function() {
                        checkGeoPlace(place.id);
                        infoWindow.open(map, marker);
                        map.panTo(marker.getPosition());
                    });
                
                    //map.setCenter(myLatlng, 15);
            }
        } 
        catch (e) {
            alert("to?" + e);
        }
    }
    
    function initMapView(lat, lng) {        
        try {
            var featureOpts = [
                {
                    stylers: [
                        {weight: 1}
                    ]
                },
                {
                    elementType: 'labels'
                },
                {
                    featureType: 'water'
                }
            ];
            
            geocoder = new google.maps.Geocoder();
            var latlng = new google.maps.LatLng(lat, lng);
            var myOptions = {
                zoom: 14,
                center: latlng,
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                scaleControl: false,
                mapTypeId: MY_MAPTYPE_ID
            };
            
            map = new google.maps.Map(document.getElementById("view-map-inner"), myOptions);
            google.maps.event.addListener(map, 'dragend', function() {
                checkGeo();
            });
            
            var styledMapOptions = {
                name: 'Custom Style'
            };

            var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

            map.mapTypes.set(MY_MAPTYPE_ID, customMapType);

            //codeListings();  
            checkGeo(map.getCenter().lat(), map.getCenter().lng());
            places = new google.maps.places.PlacesService(map);
        } 
        catch (e) { alert(e) }
    }
    
    function clearMapViewMarkers() {
        if (listingMarkers) {
            for (i in listingMarkers) {
                listingMarkers[i].setMap(null);
            }
        }
    }
    
    function codeListings() {  
        
        <c:set var="listingCtr" value="1" />
        <c:forEach items="${model.listings}" var="listing">
            var id = '<c:out value="${listing.id}"/> ';
            var title = '<c:out value="${listing.title}"/> ';
            var address = '<c:out value="${listing.address}"/> ';
            var lat = '<c:out value="${listing.lat}"/> ';
            var lng = '<c:out value="${listing.lng}"/> ';
            var primaryPhoto = '<c:out value="${listing.primaryPhoto.filename}"/> ';
            var propertyType = '<c:out value="${listing.propertyType.id}"/> ';
            
            putNumberedMarker('<c:out value="${listingCtr}"/>', id, title, "", address, lat, lng, primaryPhoto, propertyType);
            <c:set var="listingCtr" value="${listingCtr+1}" />
        </c:forEach>
    }
    
</script>